<template>
  <!-- 项目实施 - 右上角tab -->
  <div class="right-tab">
    <el-tabs v-model="activeIdx" @tab-click="handleClick" tab-position="right" style="height: 100%;">
      <el-tab-pane v-for="(i, idx) in tabList" :key="idx" :name="i.value">
        <div slot="label" :class="activeIdx === i.value ? 'tab-title active':'tab-title'">

          <img class="tab-img" v-if="activeIdx !== i.value" :src="i.img">
          <img class="tab-img" v-if="activeIdx === i.value" :src="i.active">
          <div :class="activeIdx === i.value ? 'tab-text active' : 'tab-text'">
            <span>{{i.label}}</span>
          </div>
        </div>
        
        <div class="tab-content-title">
          <img :src="i.value == '1' ? smartCheckTitleImg : i.img" width="16px" height="16px">
          <span>{{i.label}}</span>
        </div> 
        <!-- 发起附言 -->
        <div class="tab-content" v-if="i.value == '0'">
          <content1 ref="content1" :tabTitle="i.label" :info="i.datas"></content1>
        </div>
        <!-- 智能校验 -->
        <div class="tab-content" v-if="i.value == '1'">
          <content2 ref="content2" :tabTitle="i.label" :info="i.datas"></content2>
        </div>
        <!-- 处理意见 -->
        <div class="tab-content" v-if="i.value == '2'">
          <content3 ref="content3" :tabTitle="i.label" :info="i.datas"></content3>
        </div>
        <!-- 全部附件 -->
        <div class="tab-content" v-if="i.value == '3'">
          <content4 ref="content4" v-if="i.datas && i.datas[0].tabs" :tabTitle="i.label" :info="i.datas[0].tabs"></content4>
        </div>
        <!-- 流程预测 -->
        <div class="tab-content" v-if="i.value == '4'">
          <content5 ref="content5" :tabTitle="i.label" :info="i.datas"></content5>
        </div>
        <!-- 相关数据 -->
        <div class="tab-content" v-if="i.value == '5'">
          <content6 ref="content6" :tabTitle="i.label" :menuType="menuType" :info="i.datas"></content6>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import content1 from "./rightTabs/content1"; // 1.发起附言
import content2 from "./rightTabs/content2"; // 2.智能校验
import content3 from "./rightTabs/content3"; // 3.处理意见
import content4 from "./rightTabs/content4"; // 4.全部附件
import content5 from "./rightTabs/content5"; // 5.流程预测
import content6 from "./rightTabs/content6"; // 6.相关数据
export default {
  name: "rightTab",
  components: {
    content1,
    content2,
    content3,
    content4,
    content5,
    content6,
  },
  data() {
    return {
      activeIdx: "",
      smartCheckTitleImg: require('../images/icon-tab-rt-2-title.png'), 
      // tabList: [
        // {
        //   label: "发起附言",
        //   value: "0",
        //   img: require('../images/icon-tab-rt-1.png'),
        //   active: require('../images/icon-tab-rt-active-1.png')
        // },
        // {
        //   label: "智能校验",
        //   value: "1",
        //   img: require('../images/icon-tab-rt-2.png'),
        //   active: require('../images/icon-tab-rt-active-2.png')
        // },
        // {
        //   label: "处理意见",
        //   value: "2",
        //   img: require('../images/icon-tab-rt-2.png'),
        //   active: require('../images/icon-tab-rt-active-2.png')
        // },
        // {
        //   label: "全部附件",
        //   value: "3",
        //   img: require('../images/icon-tab-rt-3.png'),
        //   active: require('../images/icon-tab-rt-active-3.png')
        // },
        // {
        //   label: "流程预测",
        //   value: "4",
        //   img: require('../images/icon-tab-rt-4.png'),
        //   active: require('../images/icon-tab-rt-active-4.png')
        // },
        // {
        //   label: "相关数据",
        //   value: "5",
        //   img: require('../images/icon-tab-rt-5.png'),
        //   active: require('../images/icon-tab-rt-active-5.png')
        // }
      // ],
    }
  },
  props: {
    // 当前tab
    actIdx: {
      type: String,
      default: () => ''
    },
    // 显示tab列表
    tabList: {
      type: Array,
      default: () => []
    },
    // 所在菜单名称
    menuType: {
      type: String,
      default: () => ''
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    menuType(n) {},
    tabList: {
      handler(n, o) {},
      deep: true
    },
    dataList: {
      handler(n, o) {},
      deep: true
    },
    activeIdx(n) {
      if(this.activeIdx == '2') {
        this.$refs.content3[0].replyBox = false;
      }
    },
    actIdx(n) {
      if(n) {
        this.activeIdx = n;
      } else {
        this.activeIdx = this.tabList[0].value;
      }
    }
  },
  mounted() {
    // console.log('rightTab -- dataList', this.dataList);
    this.$nextTick(() => {
      if(this.dataList && this.dataList.length>0) {
        this.tabList.map(i => {
          let itemData = this.dataList.filter(j => j.label == i.label);
          if(itemData && itemData.length > 0) {
            i.datas = itemData[0].info;
          } else {
            i.datas = [];
          }
        })
      }
    
      if(this.actIdx) {
        this.activeIdx = this.actIdx;
      } else {
        this.activeIdx = this.tabList[0].value;
      }
      if(this.activeIdx == '2') {
        this.$refs.content3[0].replyBox = false;
      }
      document.querySelector('.v-modal').style.display = "none";
    })
    window.addEventListener('resize', this.resize);
    this.resize();
  },
  methods: {
    /**
     * @author Wrl
     * 动态获取高度
     */
    resize() {
      setTimeout(() => {
        let detailModalH = document.querySelector('.detail-modal').offsetHeight;
        if(detailModalH) {
          document.querySelector('.right-tab .el-tabs__content').style.height = document.querySelector('.detail-modal').offsetHeight;
        }
      }, 1000)
    },
    /**
     * @author Wrl
     * 点击Tab
     */
    handleClick(tab, event) {},
    /**
     * @author Wrl
     * 打开二层弹窗
     */
    showModal(e) {
      this.modalType = e;
      this.modalState = true;
      this.$emit('showNextLevel', e)
    },
    /**
     * @author Wrl
     * 关闭二层弹窗
     */
    closeModal() {
      this.modalType = '';
      this.modalState = false;
    }
  }
}
</script>

<style lang="scss" scoped>
  .right-tab {
    height: 100%;
    .tab-title {
      position: relative;
      width: 40px;
      margin: 0 0 3px 0;
      background: #ffffff;
      border-radius: 8px;
      &.active {
        background: #11a983;
      }
      .tab-img {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 12px;
        left: 50%;
        margin-left: -12px;
      }
      .tab-text {
        color: #11a983;
        text-align: center;
        padding-top: 44px;
        padding-bottom: 10px;
        width: 2em;
        margin: 0 auto;
        line-height: 16px;
        font-size: 12px;
        font-weight: 500;
        font-family: Microsoft Yahei;
        white-space: pre-wrap;
        &.active {
          color: #ffffff;
        }
        span {
          width: 2em;
        }
      }
    }
    .green-text {
      cursor: pointer;
      color: #11a983;
    }
    ::v-deep {
      ::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      .el-tabs--right {
        .el-tabs__nav-scroll {
          background: #eeeeee;
          width:100%;
          text-align: center;
        }
        .el-tabs__nav-wrap::after {
          background-color: transparent;
        }
        .el-tabs__content {
          // height: 595px;
          overflow: hidden;
          position: relative;
          height: 100%;
          overflow: overlay;
          border-radius: 8px;
          padding-right: 0px;
        }
        .el-tab-pane {
          height: 100%;
          border-radius: 8px;
          // height: 605px;
          // height: 595px;
          position: relative;
          margin-right: 5px;
          background: #ffffff;
        }
        .el-tabs__item {
          display: contents;
        }
        .el-tabs__header.is-right {
          float: right;
          margin-bottom: 0;
          margin-left: 0;
        }
        .tab-content-title {
          display: inline-flex;
          align-items: center;
          justify-content: flex-start;
          padding: 5px 10px;
          font-size: 14px;
          span {
            margin-left: 8px;
          }
        }
        .tab-content {
          border-radius: 8px;
          height: calc(100% - 30px);
        }
      }
    }
  }
</style>